

<template>
  <div class="food-route-planning">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">以下是您选择的,路线途径美食及酒店:</div>
          </div>
          <div class="category-list">
            <div>{{tourRoute}}</div>
            <div>{{foodRoute}}</div>
            <div>{{transRoute}}</div>
<!--            路线一:从太原东山地区出发,经东峰路:长风东街、长风西街、新晋祠路到达晋祠,这条路线距离相对较远，从城市的东边绕到西边,全程约30公里,根据路况行驶时间可能在!小时左右。美食:东峰路附近选择位于小店区东峰路与南中环东街交叉路口往北约170米的李家大院铁锅炖,王妃烤鱼,周边还有川厨荟火锅烧烤、洋洋螺蛳粉·肥汁米线、飞哥面馆(大盘鸡)等。酒店:太原湖滨国际大酒店-->
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">行前准备(可多选)</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="prepareTripClick(item,index)"
                 :class="item.isSelected?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in prepareTripList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">注意事项</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="bookingClick(item,index)"
                 :class="currentBooking===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in bookingList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">注意事项</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="precautionsClick(item,index)"
                 :class="currentPrecautions===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in precautionsList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="query-button-groups">
          <div class="btn-box" @click="goRegister">
            <div class="login-btn">
              确 定
            </div>
          </div>
          <div class="btn-box right-btn" @click="goAI">
            <div class="login-btn">
              AI智能生成
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <IntelligentlyGeneratedAI :label="intelligentlyLabel" :isTourist="isTouristType"
                            :typeRoute="PREDICT_STATUS.PracticalTipsPlanning"
                            :aiDataList="currentNavigationList"
                            :aiDataString="currentNavigationString"
                            @nextPageRoute="nextPageRoute" v-if="currentNavigation"/>
</template>
<script setup>
import api from "@/service/TouristHomepage";
import IntelligentlyGeneratedAI from "@/views/home/components/PreTripPlanning/IntelligentlyGeneratedAI.vue";
import {ref} from "vue";
import {PREDICT_STATUS} from "@/utils/consts";
import {useTouristHomepageStore} from "@/store/touristHomepage";
const $emit = defineEmits(['nextPageRoute'])
const intelligentlyLabel=ref('游前规划');
const isTouristType=ref(true);
const prepareTripList=ref([
  {
    name:'证件',
    isSelected:false
  },
  {
    name:'身份证',
    isSelected:false
  },
  {
    name:'学生证(门票半价)',
    isSelected:false
  },
  {
    name:'老年证(60岁以上免票)',
    isSelected:false
  },
  {
    name:'教师资格证',
    isSelected:false
  },
  {
    name:'退伍军人证',
    isSelected:false
  },
  {
    name:'记者证',
    isSelected:false
  },
  {
    name:'导游证',
    isSelected:false
  },
  {
    name:'衣物',
    isSelected:false
  },
  {
    name:'雨伞',
    isSelected:false
  },
  {
    name:'太原地铁APP',
    isSelected:false
  },
])
function prepareTripClick(data,index){
  data.isSelected=!data.isSelected;
  changeSelect();
}
const bookingList=ref([
  {
    name:'门票预约',
    isSelected:false
  },
])
const currentBooking=ref(-1)
function bookingClick(data,index){
  currentBooking.value=index;
  data.isSelected=!data.isSelected;
  changeSelect();
}
const precautionsList=ref([
  {
    name:'山西医科大学第一医院',
    isSelected:false
  },
  {
    name:'山西省儿童医院',
    isSelected:false
  },
  {
    name:'山西省人民医院',
    isSelected:false
  },
])
const currentPrecautions=ref(-1)
function precautionsClick(data,index){
  currentPrecautions.value=index;
  data.isSelected=!data.isSelected;
  changeSelect();
}
function goRegister(){
  console.log("prepareTripList",prepareTripList)
  let prams={
    preDeparture:'',
    considerations:'',
    emergencyContact:''
  }
//   行前准备
  prams.preDeparture=prepareTripList.value.filter(item=>item.isSelected).map(item=>item.name).join(',');
//   门票预约
  prams.considerations=bookingList.value.filter(item=>item.isSelected).map(item=>item.name).join(',');
//   注意事项
  prams.emergencyContact=precautionsList.value.filter(item=>item.isSelected).map(item=>item.name).join(',');

  api.createOrUpdatePracticalTips(prams).then((res)=>{
  })
}
const currentNavigationList=ref([])
const currentNavigationString=ref('')
function goAI(){
  currentNavigation.value=true;
  useTouristHomepageStore().setTouristClearStatus(false)
  let prams={
    preDeparture:'',
    considerations:'',
    emergencyContact:''
  }
//   行前准备
  prams.preDeparture=prepareTripList.value.filter(item=>item.isSelected).map(item=>item.name).join(',');
//   门票预约
  prams.considerations=bookingList.value.filter(item=>item.isSelected).map(item=>item.name).join(',');
//   注意事项
  prams.emergencyContact=precautionsList.value.filter(item=>item.isSelected).map(item=>item.name).join(',');
  prams.foodTourRouteParam= useTouristHomepageStore().setTouristAiDataFoodRoute;
  prams.tourRouteParam= useTouristHomepageStore().setTouristAiDataTourRoute;
  prams.accommodationParam= useTouristHomepageStore().setTouristAiDataTransRoute;
  api.getPracticalTipsList(prams).then((res) => {
    console.log("实用贴士路线规划AI智能生成---",  res)
    // 存入 数据
    useTouristHomepageStore().setTouristPracticalTips(res.data.answer)
    currentNavigationString.value=res.data.answer;

  })
}
function nextPageRoute(data){
  console.log('data',data)
//
  $emit('nextPageRoute',data)

}
const currentNavigation=ref(false)
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    currentNavigation.value=false;
    currentPrecautions.value=-1;
    currentBooking.value=-1;
    prepareTripList.value.forEach(item=>{
      item.isSelected=false;
    })

  }
})
function changeSelect(){
  useTouristHomepageStore().setTouristClearStatus(false)
}
// 计算属性
const tourRoute = computed(() => {
  return useTouristHomepageStore().setTouristAiDataTourRoute || '';

})
const foodRoute = computed(() => {
  return useTouristHomepageStore().setTouristAiDataFoodRoute || '';

})
const transRoute = computed(() => {
  return useTouristHomepageStore().setTouristAiDataTransRoute;
})
onMounted(() => {

})
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
.food-route-planning{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;

          //  换行
          flex-wrap: wrap;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 362px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
</style>
<style>
@import "@/assets/main.scss";
</style>